<template>
  <VNnodeBox></VNnodeBox>
</template>

<script setup lang="tsx">
import { ref } from 'vue';
//在script标签中生成的都是虚拟dom
// 1、声明的变量数据要在jsx/tsx中渲染 要使用{}
// 2、jsx/tsx中所有的vue指令都不能用 v-for v-if等等 要使用onClick=处理函数
// 3、jsx/tsx所有涉及到动态属性绑定不能使用 : "" 一律都是{}
// 4、逻辑分支 可以使用三元运算符
// 5、循环 ==》map函数
// 6、return 只能有一个根节点
// 7、注释{/**注释 */}
// 8、支持了子组件挂载抽离


//这些语法和react类似
// 这种方式实现动态需求很灵活
let money = ref(100)
const makemoney = () => {
  money.value++
}
const id = 'box'
let flag = ref(true)
const list = ref([
  { id: 1, content: "吃饭", done: true },
  { id: 2, content: "睡觉", done: false },
  { id: 3, content: "打代码", done: true },
]);
const VNnodeBox = () => {
  //不是真实结构所以需要加.value
  if (flag.value) {
    return (<div>
      <p>{money.value}</p>
      <button onClick={makemoney}>+钱</button>
      <h1 id={id}></h1>
      <strong>{flag.value ? '真的' : '假的'}</strong>
      <ul>
        {
          list.value.map(item => {
            return <li key={item.id}>{item.content}</li>
          })
        }
      </ul>
    </div>)
  } else {
    return <em>flag为false展示的结构</em>
  }

}
</script>

<style scoped>
</style>